<template>


    <ImgCutter v-on:cutDown="cutDown"
               ref="imgCutterModal"
               label="选择图片"
               :crossOrigin="true"
               crossOriginHeader="*"
               rate=""
               toolBgc="none"
               :isModal="true"
               :showChooseBtn="true"
               :lockScroll="true"
               :cutWidth="cutWidth"
               :cutHeight="cutHeight"
               :sizeChange="false"
               :moveAble="true"
               :originalGraph="false"

    >
        <a slot="open">

            <a-avatar v-if="hasUrl"   :size="100" :src="imgSrc"/>
            <a-avatar v-else   :size="100" icon="user" />
        </a>


    </ImgCutter>
</template>


<script>

    import {base64upImgage } from '../../../util/internal.api'
    import ImgCutter from 'vue-img-cutter'

    export default {

        props: ['imgUrl'],
        components: {ImgCutter},
        data() {


            return {
                cutWidth:200, //裁剪后图片宽度
                cutHeight:200, //裁剪后图片高度
                imgSrc: null,
                hasUrl:false,

            };
        },
        methods: {

            cutDown(e) {

                let data={dataURL: e.dataURL.replace("image/png","image/jpg")}
                //把BASE64的格式强制转换成 jgp格式
                base64upImgage(data).then(res => {
                    if (res.code === 0) {
                        //通知父组件 更新图片地址
                        this.$emit('callBack', res.data.url);
                    }else{
                        this.$notification.error({
                            message: '图片上传失败',
                            description: res.message
                        });
                    }


                });

            },


            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },


            //完成监听
            onSubmit(e) {
                //AJAX时间数据处理

                //关闭弹窗
                this.visible = false;
                this.$emit('closeModal', {render: false});

            },
            ///分组选择
            onChange(checkedValues) {
                console.log('checked = ', checkedValues);
            },


        },

        created() {
            this.imgSrc = this.imgUrl;
        },

        watch: {
            imgUrl(val) {

                this.imgSrc = val
                this.hasUrl = !this.$exMod.isEmptyString(val )
            }

        }


    };
</script>
